<template>
  <div>
      <!-- 一：传统写法 -->
      <!-- <Child :title="title"/> -->

      <!-- 在组件上使用 v-model 相当于绑定 value prop 和 input 事件：无法传递数据 -->
      <!-- <Child v-model="title"/> -->
      <!-- <Child :value="title" @input="title=$event"/> -->

      <!-- 使用v-bind:sync vue是单向数据流，为了对prop进行"双向绑定",可以是用sync来实现 -->
      <Child :title.sync="title"/>
      <!-- 语法糖 -->
      <Child :title="title" @update:title="title = $event"/>

  </div>
</template>

<script>
import Child from '@/components/child.vue'
export default {
  name: 'VModel',
  components: { Child },
  data () {
    return {
      title: '哈哈哈'
    }
  }
}
</script>

<style>

</style>
